<template lang="html">
	<div class="details">
		<div class="details-header">
			<div class="back" @click="backHandle">
				<i class="iconfont icon-xiangzuo"></i>
			</div>
			<div class="header-title">
				{{ goodGetters.long_name }}
			</div>
			<div class="header-right">
			  	&nbsp;
			</div>
		</div>
		<div class="goods">
			<div class="goods-img">
				<img :src="goodGetters.img" alt="">
			</div>
			<p class="goods-name">{{ goodGetters.long_name }}</p>
			<p class="goods-price">￥{{ goodGetters.price }}</p>
			<div class="brand">
				<div class="brand-title">
					商品详情
					<img src="../assets/images/title_bg-6dc6dfc1.png" alt="">
				</div>
				<div class="brand-desc">
					<p><span>品<i class="hide">中中</i>牌</span> {{ goodGetters.brand_name }}</p>
					<p><span>产品规格 </span> {{ goodGetters.specifics }}</p>
				</div>
			</div>
		</div>
		<img class="detail-default" src="../assets/images/DetailDefault.jpg" alt="">
		<DetailsFooter :good="goodGetters" :id="goodGetters.id"/>
	</div>
</template>

<script>
	import { mapGetters } from "vuex"
	import DetailsFooter from "../components/detailsFooter"
	export default{
		name: "Details",
		data(){
			return{

			}
		},
		components:{
			DetailsFooter
		},
		beforeMount(){
			window.addEventListener('load', e => {
			    this.$router.push("/home")
			});	
		},
		computed:{
		    ...mapGetters({
		    	goodGetters:"good/getGood"
		    })
		},
		methods:{
			backHandle(event){
				this.$router.back()
			}
		}
	}
</script>

<style lang="less" scoped>
	.details{
		padding-top: 1.1rem;
	}
	.details-header{
		width: 100%;
		height: 1.1rem;
		background: #f9fafd;
		overflow: hidden;
		line-height: 1.1rem;
		border-bottom: 1px solid #e0e0e0;
		text-align: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		.back{
			width: 1.1rem;
			float: left;
			text-align: center;
			i{
				font-size: 0.4rem;
			}
		}
		.header-right{
			width: 1.1rem;
			float: right;
		}
		.header-title{
			width: 70%;
			font-weight: 700;
			text-align: center;
			overflow:hidden;
		    text-overflow:ellipsis;
		    white-space:nowrap;
		    float: left;
		}
	}
	.goods{
		margin-bottom: 0.2rem;
		.goods-img{
			padding: 0.25rem;
			background: #fff;
			img{
				width: 100%;
				border: 1px solid #999;
			}
		}
		.goods-name{
		    padding: 0 1rem;
		    color: #292d33;
		    font-size: 0.46rem;
		    line-height: normal;
		    height: auto;
		    text-align: center;
		    white-space: normal;
		    text-indent: 0;
		    background: #fff;
		}
		.goods-price{
			width: 100%;
			padding: 0.5rem 0;
			text-align: center;
			font-size: 0.48rem;
			color: red;
			background: #fff;
			font-weight: 700;
			margin-bottom: 0.2rem;
		}
		.brand{
			padding: 0.4rem;
			overflow: hidden;
			background: #fff;
			.brand-title{
				position: relative;
				margin-bottom: 0.2rem;
			    background-size: auto .2rem;
			    text-align: center;
			    color: #e0bd6a;
			    img{
					width: 60%;
					position: absolute;
					top: 46%;
					left: 20%;
					right: 20%;
				}
			}
			.brand-desc{
				p{
					width: 100%;
					padding: 0.1rem 0 ;
					span{
						padding: 0 0.3rem;
						display: inline-block;
						width: 2rem;
						color: #999;
						.hide{
							visibility: hidden;
						}
					}
				}
			}
		}
	}
	.detail-default{
		width: 100%;
	}
</style>